<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>日期和时间点</span>
          </div>
          <el-row>
            <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>日期和时间范围</span>
          </div>
          <el-row>
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>默认的起始与结束时刻</span>
          </div>
          <el-row>
            <div class="block">
              <el-date-picker
                v-model="value3"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']">
              </el-date-picker>
            </div>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "dateTime",
  data(){
      return {
        value1:'',
        value2: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value3:''
  }
  },
}
</script>

<style scoped lang="scss">
.clearfix{
  font-size: 14px;
}
.el-col{
  margin-bottom: 20px;
}
</style>
